@keyframes cardEntrance {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.recommendation-card {
    animation: cardEntrance 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
    animation-delay: calc(var(--index) * 80ms);
}

.budget-progress {
    height: 8px;
    border-radius: 4px;
    background: rgba(209,209,214,0.3);
    overflow: hidden;
}

.budget-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #007AFF 0%, #00C7BE 100%);
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

@media (prefers-color-scheme: dark) {
    .glassmorphism {
        background: rgba(28,28,30,0.8) !important;
    }
    .recommendation-card {
        background: rgba(44,44,46,0.8);
    }
}